.movie-item
	display: inline-block;
	margin: 10px
	float: left
	font-size: 0.8em

	.cover
		background-image url(../images/posterholder.png)
		background-size: 134px 196px
		width: 134px
		height: 196px
		border-radius: $PosterRadius
		box-shadow: $PosterShadow
		cursor: pointer
		transition: opacity .50s ease
		opacity: 0

		.cover-overlay
			background $PosterHoverOverlay
			text-align center
			padding 88px 0
			width 100%
			height 100%
			border: 2px solid $PosterHoverOverlay
			border-radius $PosterRadius
			transition opacity .25s ease
			transition border-color .25s ease
			opacity 0
			position relative

			.actions-favorites
				float: right
				margin-top: -80px
				margin-right: 7px
				color: #FFFFFF
				font-size: 1.4 em
				-webkit-transition: color 0.5s

				&.selected
					color: $FavoriteColor
				&:hover
					cursor: pointer
					color: $ButtonBgActive

			.actions-watched
				float: left
				margin-top: -80px
				margin-left: 7px
				color: #FFFFFF
				font-size: 1.4 em
				-webkit-transition: opacity 0.5s
				opacity: 0.3

				&:hover
					opacity: 0.7
					cursor: pointer

				&.selected
					opacity: 1

			.rating
				background: linear-gradient(to bottom, rgba(206,206,206,0) 0%,rgba(22,22,22,0.69) 69%,rgba(22,22,22,0.95) 100%)
				border-radius $PosterRadius
				bottom 0
				display none
				height auto
				left 0
				margin 0
				overflow hidden
				padding: 10px 5px 5px
				position absolute
				right 0
				text-align left

			.rating-stars
				float left
                
				svg
					margin-right -2px

			.rating-value
				font-size 1em
				color #fff
				float right

	&.selected
		.cover
			.cover-overlay
				border 2px solid $PosterHoverBorder
				transition all .25s
				opacity: 1
	.title
		height: 14px;
		margin: 6px 0 4px;
		color: $Text1
		max-width: 134px
		overflow: hidden
		text-overflow: ellipsis
		white-space: nowrap

	.year
		font-size: 0.85em
		color: $Text4
		display: inline

	.seasons
		font-size: 0.85em
		color: $Text4
		display: inline
		float: right
		
		&.quality
			display: none


.load-more
	background-size 134px 196px
	width 134px
	height 196px
	border-radius 4px
	box-shadow $PosterShadow
	cursor pointer
	display inline-block
	margin 10px
	float left
	background-color:$BgColor1
	-webkit-transition: background-color 200ms linear;

	> .loading-container
		display none
		margin-top 70px
		margin-left 40px

	.status-loadmore
		position: absolute;
		color: $ButtonText;
		margin-top: 80px;
		margin-left: 10px;
		margin-right: 10px;
		padding-left: 15px;
		padding-right: 15px;
		background-color: $ButtonBg;
		-webkit-box-shadow: 0px 0px 10px #000;
		padding-bottom: 10px;
		padding-top: 10px;
		border-radius: 2px;
		font-family: $MainFont, $AlternateFont;
		-webkit-transition: background-color 200ms linear;
		width: 100%;
		max-width 113px
		text-align center

		&:hover
			background-color:$ButtonBgHover
		&:active
			background-color:$ButtonBgActive